import Qt 4.7
import "G.js" as G

Item {
    id: idSpotsDelegate
    height: 70
    width: idSpotsDelegate.ListView.view.width

    signal loadImages(variant message)
    signal imageSelected(string url)

    Image {
        id: background
        width: parent.width
        height: parent.height;
        source: "art/macapp_cellbg.png"
        smooth: true
        fillMode: Image.Stretch
        anchors.top: parent.top
    }

    Text {
        id: idTextSpotName
        anchors.leftMargin: 20
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 60
        text: spotName
        wrapMode: Text.WordWrap
        smooth: true

        font { bold: true; family: "Helvetica"; pixelSize:18 }
        color: "#FFFFFF"
        elide: Text.ElideRight
    }


    Text {
        id: idTextTags
        anchors.leftMargin: 20

        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: 70 / 2 + 10 // do not bind with height as it is going to change
        anchors.right: parent.right
        anchors.rightMargin: 60
        text: prettifiedTags(spotTags)
        font { bold: false; pixelSize:10; italic: true }
        color: "#ffffff"
        smooth: true
        wrapMode: Text.WordWrap
        elide: Text.ElideRight
    }

    function prettifiedTags(tags) {
        return  tags.replace(/,/g,", ");
    }




    OpenButton {
        id: idOpenButton
        width: 38
        height: 39
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 70 / 2  - height / 2 // do not bind with height as it is going to change
        onUp: idSpotsDelegate.state = ""
        onDown: idSpotsDelegate.state = "Expanded"
    }


    Text {
        id: idTextAddress
        anchors.top: parent.top
        anchors.topMargin: 70
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.right: idButtonRecommend.left
        anchors.rightMargin: 10
        text: formattedAddress()
        color: 'white'
        font { bold: false; pixelSize:12; italic: false }
        opacity: 0
        smooth: true
        Behavior on opacity { NumberAnimation { duration: 150 } }
        elide: Text.ElideRight
    }

    function formattedAddress() {
        var address = spotStreet != undefined && spotStreet != "" ? spotStreet : "";
        if (address.length > 0) {
            address += spotCity != undefined && spotCity != "" ? ", " + spotCity : "";
        } else {
            address += spotCity != undefined && spotCity != "" ? spotCity : "";
        }
        if (address.length > 0) {
            address += spotCountry != undefined && spotCountry != "" ? ", " + spotCountry : "";
        } else {
            address += spotCountry != undefined && spotCountry != "" ? spotCountry : "";
        }
        return address
    }

    ImageList {
        id: idImageList
        anchors.left: idTextAddress.left
        anchors.leftMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.right: idButtonRecommend.left
        anchors.rightMargin: 60
        opacity: 0
        orientation: ListView.Horizontal
        Behavior on opacity { NumberAnimation { duration: 150 } }

        onImageSelected: idSpotsDelegate.imageSelected(url);
    }

//    Rectangle {
//        anchors.left: parent.left
//        anchors.top: idImageList.top
//        height: 20
//        width: idImageList.height
//        color: "black"
//        opacity: 0.8
//        rotation: 90
//        gradient: Gradient {
//            GradientStop {
//                position: 0.00;
//                color: "#666666";
//            }
//            GradientStop {
//                position: 0.50;
//                color: "#111111";
//            }
//        }
//    }

    RecommendButton {
        id: idButtonRecommend
        anchors.horizontalCenter: idOpenButton.horizontalCenter

        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10

        onRecommended: idSpotsList.recommended(spotId, spotInCollection)
    }



    states: [
        State {
            name: "Expanded"
            PropertyChanges { target: idSpotsDelegate; height: 180 }
            PropertyChanges { target: idButtonRecommend; opacity: 1 }
            PropertyChanges { target: idTextAddress; opacity: 1 }
            PropertyChanges { target: idImageList; opacity: 1 }
            StateChangeScript {
                script: {
idSpotsDelegate.loadImages({'model': idImageList.model, 'spotId': spotId,'g': G.g});
//                    idSpotsDelegate.ListView.imageWorker.sendMessage({'model': idImageList.model, 'spotId': spotId,'g': G.g});
                    //imageWorker.sendMessage({'model': idImageList.model, 'spotId': spotId,'g': G.g});
                }
            }
        }
    ]

    Behavior on height {
        NumberAnimation { duration: 150; }
    }

//    WorkerScript {
//        id: imageWorker
//        source: "ImageLoader.js"
//        onMessage: {
//            if (messageObject.result == 'SUCCESS') {
////                idSpotsList.state = "LoadedSpots"
////                idSpotsList.spotsSuccess();
//            } else {
////                idSpotsList.spotsError();
//            }
//        }
//    }



}


